<template>
<div class="">
  <div class="remain-like">
    您可以给 <span style="color: #A3312F">{{ 3 - ret.userLike.length }}</span> 句喜欢的话点赞
  </div>
  <div class="group-votes">
    <div class="one" v-bind:style="{flex: classObject.oneFlex}">
      正 {{classObject.oneFlex}}
    </div>
    <div class="theOther" v-bind:style="{flex: classObject.theOtherFlex}">
      反 {{classObject.theOtherFlex}}
    </div>
  </div>
<div class="page">
  <div class="left">
    <ul id="example-1">
      <li v-for="item in items">
        <div class="item">
          <!-- <div><img :src = "item.player_img" alt=""></div> -->
          <div class="itemLeft"><img src="../assets/images/oa_image_89.jpg" alt=""></div>
          <div class="itemRight">
            <div class="tagLeft">{{ item.tag }}</div>
            <div> {{ item.player }}</br>
            </div>
          </div>
        </div>
        <div class="content">
          {{ item.messages }}
        </div>
        <div class="likeLeft">
          <div v-tap="{ methods : doWhenLike, groupId: item.group_id, playerId: item.player_id, sentenceId: item.sentence_id}">赞</div>
        </div>
      </li>
    </ul>
  </div>
  <div class="right">
    <ul id="example-2">
      <li v-for="item in items">
        <div class="item">
          <div class="itemRight">
            <div class="tagRight">{{ item.tag }}</div>
            <div> {{ item.player }}</br>
            </div>
          </div>
          <!-- <div><img :src = "item.player_img" alt=""></div> -->
          <div class="itemLeft"><img src="../assets/images/oa_image_73.jpg" alt=""></div>
        </div>
        <div class="content">
          {{ item.messages }}
        </div>
        <div class="likeRight">
          <div v-tap="{ methods: doWhenLike, groupId: item.group_id, playerId: item.player_id, sentenceId: item.sentence_id }">赞</div>
        </div>
      </li>
    </ul>
  </div>
</div>
</div>
</template>

<script>
import $ from 'jquery';
import data from '../data/data.json';
import {like, getLikeInfo} from '../service/Data'
// import Data from '../service/Data';

// console.log(getData);
export default {
  data() {
    const user = JSON.parse(localStorage.getItem('ict48-user-info'));
    return {
      items: data.items,
      user,
      ret: {
        userLike: [],
        sentenceList: []
      },
      classObject: {
        oneFlex: '20',
        theOtherFlex: '80'
      }
    };
  },
  /**
   * created
   */
  created() {
  },
  /**
   * mounted
   */
  mounted() {
    console.log('debateMounted');
    $('#example-1').find('li').fadeTo(0, 0);
    $('#example-2').find('li').fadeTo(0, 0);
    /**
     * remain-like
     */
    $('.remain-like').fadeTo(10000, 0);

    let array = data.items;
    /**
     * 逐步显示
     */
    for (let i = 1; i < array.length + 1; i++) {
      // 取奇偶数
      let indexLeft = (i % 2 === 0) ? indexLeft = i : indexLeft = 0;
      let indexRight = (i % 2 === 0) ? indexRight = 999 : indexRight = i;
      // 分别显示奇偶行
      setTimeout(() => {
        $('#example-1').find('li').eq(indexLeft).fadeTo(0, 1);
      }, 800 + (indexLeft * 1500));
      setTimeout(() => {
        $('#example-2').find('li').eq(indexRight).fadeTo(0, 1);
      }, 800 + (indexRight * 1500));
    }
    /**
     * 屏幕滚动
     */
    // for (let i = 0; i < 1000; i++) {
    //   let index = i;
    //   setTimeout(() => {
    //     window.scrollBy(0, index * 0.01);
    //   }, index * 100);
    // }

    /**
     * 获取点赞记录
     */
    const me = this
    getLikeInfo(this.user)
      .then(function (ret) {
        me.ret = ret;
        console.log('ret', ret);
      }).catch(function () {
        alert('没有获取到您的点赞记录,请刷新页面')
        console.log('没有获取到点赞记录');
      })
  },

  methods: {
    doWhenLike ({groupId, playerId, sentenceId}) {
        // do sth
      const params = {
        groupId,
        playerId,
        sentenceId
      }
      like({data: params, user: this.user})
        .then(function (flag) {
          if (flag) {
            alert('点赞成功')
            console.log('点赞成功');
          } else {
            alert('点赞次数超过限额');
            console.log('点赞次数超过限额');
          }
        })
        .catch(
          function () {
            alert('点赞失败,请重试');
            console.log('点赞失败,请重试');
          }
        )
    }
  }
}
</script>

<style lang="scss" scoped>
// remain-like
.remain-like {
  z-index: 3;
  position: fixed;
  width: 100%;
  font-size: 10px;
  padding: 0.2rem;
  bottom: 0;
  background-color: #ececec;
}
// group-votes
.group-votes {
  z-index: 3;
  position: fixed;
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  background-color: #ececec;
  display: flex;
  font-size: 10px;
  .one {
    // color: #4D4D4D;
    color: #f5f5f5;
    flex: 120;
    // background-color:#ececec;
    background-color:black;
  }
  .theOther {
    color: #f5f5f5;
    flex: 50;
    background-color:#A3312F;
  }
}
.page {
    // position: fixed;
    position: relative;
    top: 2rem;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 1;
    background-color: #FBAC3B;
    display: flex;
    p,
    span {
        font-family: Helvetica Neue,Tahoma,Arial;
    }
}
// 两边
.left {
    flex: 1;
    width: 50%;
}
.right {
    flex: 1;
    width: 50%;
    background-color: white;
}
// item
.item {
    display: flex;
    .itemLeft {
        flex: 1;
        img {
            // position: relative;
            // top: 1.5rem;
            margin-top: - 0.05rem;
            width: 2rem;
            // height: 3rem;
            border-radius: 50%;
            // border-color: #f7f7f7;
            border-color: #E7E6E6;
            border-style: solid;
            border-width: 0.1rem;
        }
    }
    .itemRight {
        flex: 3;
    }
}
// tag
.tagLeft {
    border-radius: 5px;
    border-color: white;
    border-left-style: solid;
    border-width: 1px;
    color: white;
}
.tagRight {
    border-radius: 5px;
    border-color: #A3312F;
    border-right-style: solid;
    border-width: 1px;
    color: #A3312F;
}
// 点赞
.likeLeft {
    text-align: center;
    width: 100%;
    div {
        border-radius: 50%;
        border-color: #4D4D4D;
        background-color: #FFFFFF;
        border-style: solid;
        border-width: 1px;
        color: #4D4D4D;
        margin-top: 0.5rem;
        line-height: 2rem;
        height: 2rem;
        width: 2rem;
        font-size: 15px;
    }
}
.likeRight {
    text-align: center;
    width: 100%;
    div {
        border-radius: 50%;
        border-color: #4D4D4D;
        background-color: #A3312F;
        border-style: solid;
        border-width: 1px;
        color: #FFFFFF;
        margin-top: 0.5rem;
        line-height: 2rem;
        height: 2rem;
        width: 2rem;
        font-size: 15px;
    }
}
#example-1 {
    margin: 0.5rem;
    text-align: left;
    font-size: 10px;
    .content {
        margin-top: 0.2rem;
        background-color: #FFFFFF;
        padding: 0.3rem;
        font-size: 12px;
        color: #4D4D4D;
        border-radius: 5px;
    }
}
#example-2 {
    margin: 0.5rem;
    text-align: right;
    font-size: 10px;
    .content {
        margin-top: 0.2rem;
        text-align: left;
        background-color: #A3312F;
        padding: 0.3rem;
        font-size: 12px;
        color: #FFFFFF;
        border-radius: 5px;
    }
}
</style>
